@charset "utf-8";
$fontsize:64px;
@function r($px){
    @return $px/$fontsize*1rem;
}
body{
    width: 100%;
    height: 100%;
}
.xiagu{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    .shanglu{
        width: 100%;
        height: r(100px);
        .liebiao{
            width: r(100px);
            height: r(50px);
            float: left;
            padding-left: r(23px);
            a{
                color: #333333;
                font-size: r(30px);
            }
        }
        .sousuo{
            float: right;
            margin-top: r(25px);
            width: r(100px);
            height: r(50px);
            position: relative;
            a{
                position: absolute;
                color: #333333;
                font-size: r(30px);
            }
        }
       >div{
            text-align: center;
            display: inline;
            line-height: r(100px);
            p{
                font-size: r(30px);
            }
        }
    }
    .zhonglu{
        position: absolute;
        top: r(100px);
        left: 0;
        width: 100%;
        margin: 0 auto;
        bottom: r(96px);
        overflow-x: hidden;
        overflow-y: scroll;
        .tu{
            width: 100%;
            position: relative;
            font-size: 0;
            img{
                width: 100%;
            }
            .wenzi{
                height: r(100px);
                position: absolute;
                left: 0;
                bottom: 0;
                font-size: 0;
                background: rgba(0,0,0,.3);
                >div{
                    margin-top: r(22px);
                    display: inline-block;
                    >p{
                        width: r(212px);
                        font-size: r(21px);
                        text-align: center;
                        color: white;
                    }
                }
            }
        }
        .shangchuan{
            width: 90%;
            margin: 0 auto;
            font-size: 0;
            margin-top: r(20px);
            margin-bottom: r(20px);
            .shangchuanbox{ 
                display: inline-block;
                width: 100%;
                border: 1px solid #e3e3e3;
                border-radius: r(8px);
                font-size: r(28px);
                color: #e33030;
                text-align: center;
                span{
                    margin-top: r(15px);
                    margin-bottom: r(15px);
                }
                span:nth-child(1){
                    display: inline-block;
                    vertical-align: middle;
                    img{
                        width: r(35px);
                        height: r(35px);
                    }
                }
                .tianjia{
                    height: 100%;
                    width: 100%;
                    background: rgba(0,0,0,.3);
                    position: absolute;
                    bottom: 0;
                    left: -500px;
                    transition: all 1s;
                    color: #999999;
                    .tianjiabox{
                        background: white;
                        width: 100%;
                        position: absolute;
                        bottom: 0;
                        img{
                            margin-top: r(30px);
                            margin-bottom: r(20px);
                            width: r(100px);
                            height: r(100px);
                        }
                        .xian{
                            width: 100%;
                            height: 1px;
                            background: #e0e0e0;
                            margin-top: r(30px);
                            margin-bottom: r(38px);
                        }
                        .quxiao{
                            text-align: center;
                            font-size: r(32px);
                            color: black;   
                        }
                    }
                }
                &:hover{
                    .tianjia{
                        transform: translateX(500px);
                    }  
                }
            }
        }
        .gongneng{
            width: 100%;
            margin: 0 auto;
            .gongnengbox{
                width: 100%;
                font-size: 0;
                border-top: 1px solid #eeeeee;
                border-bottom: 1px solid #eeeeee;
                >div{
                    display: inline-block;
                    text-align: center;
                    width: 33%;
                    margin-top: r(55px);
                    margin-bottom: r(50px);
                    a{
                        color: #999999;
                        display: inline-block;
                        p{
                            font-size: r(22px);
                            img{
                                width: r(82px);
                                margin-bottom: r(40px);
                            }
                        }
                    }
                        
                }
            }
        }
    }
    .xialu{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 0;
        border-top: 1px solid #c1c1c1;
        a{
            padding-top: r(16px);
            display: inline-block;
            width: 25%;
            p{
                text-align: center;
                img{
                    width: r(49px);
                    height: r(40px);
                }
            }
            p:nth-child(2){
                font-size: r(20px);
                color: #a4a4a4;
            }
        }
        .active{
            p:nth-child(2){
                color: #B20000;
            }
        }
    }
}